<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        font-size: 90px;
        font-style: italic;
      }
    </style>
  </head>

  <body>
    <button>发起请求</button>
    <div></div>
    <!-- <script src="./03.Promise基本用法.js"></script> -->
    <script src="./Promise封装请求方式.js"></script>

    <script>
      const btn = document.querySelector('button')
      const div = document.querySelector('div')
      btn.addEventListener('click', async function () {
        // try {
        //   const res1 = await fangHaoAjax({ method: 'GET', url: 'http://ajax-base-api-t.itheima.net/api/getbooks?id=1' })
        //   console.log(res1)
        //   const res2 = await fangHaoAjax({ method: 'GET', url: 'http://ajax-base-api-t.itheima.net/api/getbooks?id=2' })
        //   console.log(res2)
        //   const res3 = await fangHaoAjax({ method: 'GET', url: 'http://ajax-base-api-t.itheima.net/api/getbooks?id=3' })
        //   console.log(res3)
        //   div.innerHTML = '我是主页'
        // } catch {
        //   div.innerHTML = '404'
        // }
        Promise.all([
          await fangHaoAjax({ method: 'GET', url: 'http://ajax-base-api-t.itheima.net/api/getbooks?id=1' }),
          await fangHaoAjax({ method: 'GET', url: 'http://ajax-base-api-t.itheima.net/api/getbooks?id=2' }),
          await fangHaoAjax({ method: 'GET', url: 'http://ajax-base-api-t.itheima.net/api/getbooks?id=3' }),
        ])
          .then((res) => {
            div.innerHTML = '我是主页'
            console.log(res)
          })
          .catch((err) => {
            div.innerHTML = '404'
            console.log(err)
          })
      })
    </script>
  </body>
</html>
